﻿<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Home Page
</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="ResourceContent" runat="server">
    <script src="../../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<%--    <script src=" http://api.map.baidu.com/api?key=11854974dc163a9796be1acf175f2ff4&v=1.1&services=true" type="text/javascript"></script>     
--%>
    <script src="../../Scripts/baiduMapAPI_V1.1.js" type="text/javascript"></script>     

   <script type="text/javascript">
       var myDis; // = new BMap.DistanceTool(map);
       var disFlag = false;
       var localSearch;
       var curPage = 1;
       //pin tool
       function addPushPinTool() {
           var myPushpin = new BMap.PushpinTool(map);          // 创建标注工具实例  
           myPushpin.addEventListener("markend", function (e) {  // 监听事件，提示标注点坐标信息  
               alert("You marked：" + e.marker.getPoint().lng + ", " + e.marker.getPoint().lat);
           });
           myPushpin.open();                                   // 开启标注工具  
       }

       function panToLocation(x, y,title) {
           //var zoom = map.getZoom();
           map.zoomTo(14); // zoom out 2 levels
           var point = new BMap.Point(y, x);
           map.panTo(point);
           var marker = new BMap.Marker(point);
           marker.setPoint(point);
           marker.setOffset(new BMap.Size(5, 5));
           marker.setTitle(title);
           map.addOverlay(marker);

           marker.addEventListener("click", function () { this.openInfoWindow(infoWin); });

           var infoWinOpts = {
               width: 180
                , height: 60
           }
           var infoWin = new BMap.InfoWindow("<div style='text-align:left;margin-top:3px;font-size:17;color:#1A6DAF'>Addr：XXXXXXX<br>Tel：028-XXXXXX</div>", infoWinOpts); //点击显示文字  
           marker.openInfoWindow(infoWin);

       }

       function nextPage() {//debugger;
           curPage = curPage +1;
           localSearch.gotoPage(curPage);
           //map.reset();
           //map.clearOverlays();
//           $("#resultDiv").empty();
//           for (var i = 0; i < localSearch._results._pois.length; i++) {
//               var str = "";
//               str += "<div style='width:320px'>" + (i + 1).toString() + ". "
//                                  + "<a onclick='panToLocation(" + localSearch._results._pois[i].point.lat + "," + localSearch._results._pois[i].point.lng + ",\"" + localSearch._results._pois[i].title + "\")' href='javascript:void(0);' id='lkPlace_" + localSearch._results._pois[i].point.lat.toString() + "_" + localSearch._results._pois[i].point.lng.toString() + "'>" + localSearch._results._pois[i].title
//                                  + "</a>"
//                                  + "<br/>" + localSearch._results._pois[i].address + "<br/>"
//                                  + "Latitude: " + localSearch._results._pois[i].point.lat.toString()
//                                  + ", Longitude: " + localSearch._results._pois[i].point.lng.toString()
//                                  + "<br/><a  href='javascript:void(0);' id='lkPin_" + localSearch._results._pois[i].point.lat.toString() + "_" + localSearch._results._pois[i].point.lng.toString() + "'>"
//                                  + "Pin it" + "</a>"
//                                  + "</div>";
//               $("#resultDiv").append(str);
//               //debugger;

//           }
//           if (localSearch._results._numPages > curPage) {
//               $("#resultDiv").append("<a href='javascript:void(0);' onclick='prevPage()' id='lkPrev'>Prev</a> <a href='javascript:void(0);' onclick='nextPage()' id='lkNext'>Next</a>");
//           }
//           var x = localSearch._results._pois[0].point.lat;
//           var y = localSearch._results._pois[0].point.lng;
//           var title = localSearch._results._pois[0].title;
//           panToLocation(x, y, title);
       }

       function prevPage() {
           curPage = curPage - 1;
           localSearch.gotoPage(curPage);
           //map.reset();
           //map.clearOverlays();
//           $("#resultDiv").empty();
//           for (var i = 0; i < localSearch._results._pois.length; i++) {
//               var str = "";
//               str += "<div style='width:320px'>" + (i + 1).toString() + ". "
//                                  + "<a onclick='panToLocation(" + localSearch._results._pois[i].point.lat + "," + localSearch._results._pois[i].point.lng + ",\"" + localSearch._results._pois[i].title + "\")' href='javascript:void(0);' id='lkPlace_" + localSearch._results._pois[i].point.lat.toString() + "_" + localSearch._results._pois[i].point.lng.toString() + "'>" + localSearch._results._pois[i].title
//                                  + "</a>"
//                                  + "<br/>" + localSearch._results._pois[i].address + "<br/>"
//                                  + "Latitude: " + localSearch._results._pois[i].point.lat.toString()
//                                  + ", Longitude: " + localSearch._results._pois[i].point.lng.toString()
//                                  + "<br/><a  href='javascript:void(0);' id='lkPin_" + localSearch._results._pois[i].point.lat.toString() + "_" + localSearch._results._pois[i].point.lng.toString() + "'>"
//                                  + "Pin it" + "</a>"
//                                  + "</div>";
//               $("#resultDiv").append(str);
//               //debugger;

//           }
//           if (localSearch._results._numPages > curPage) {
//               $("#resultDiv").append("<a href='javascript:void(0);' onclick='prevPage()' id='lkPrev'>Prev</a> <a href='javascript:void(0);' onclick='nextPage()' id='lkNext'>Next</a>");
//           }
//           var x = localSearch._results._pois[0].point.lat;
//           var y = localSearch._results._pois[0].point.lng;
//           var title = localSearch._results._pois[0].title;
//           panToLocation(x, y, title);
       }

       $(function () {
           myDis = new BMap.DistanceTool(map);
           $("#pushPin").click(function () {
               addPushPinTool(); // push pin tool
           });
           $("#openDistanceTool").click(function () {
               //debugger;
               if (!disFlag) {
                   myDis.open();
                   disFlag = true;
                   $("#openDistanceTool").val("Close distance tool");
               }
               else {
                   myDis.close();
                   disFlag = false;
                   $("#openDistanceTool").val("Open distance tool");
               }
           });
           //           $("#closeDistanceTool").click(function () {
           //               myDis.close();
           //           });




           $("#searchLocal").click(function () {
               var search = $.trim($("#txtSearch").val());
               var point;
               if (search.length != 0) {
                   $("#resultDiv").empty();
                   $("#searchLocal").attr("disabled", "disabled");

                   localSearch = new BMap.LocalSearch(map, {
                       renderOptions: { //map: map, 
                           //autoViewport: true,
                           selectFirstResult: true//,
                           //panel: "resultDiv"
                       }
                   });
                   //localSearch.enableFirstResultSelection();
                   localSearch.setPageCapacity(15);
                   localSearch.search(search);

                   localSearch.setSearchCompleteCallback(function (results) {
                       //debugger;

                       //    address: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
                       //    city: "xxxx"
                       //    phoneNumber: "xxxxxxx"
                       //    point: {...}
                       //    postcode: "xxxxxx"
                       //    title: "xxxx"
                       //    type: 0
                       //    uid: "daa397836514af4a28201af1"
                       //    url: "http://map.baidu.com/?s=inf%26uid%3Ddaa397836514af4a28201af1%26c%3D75&i=0&sr=1"
                       if (results._pois.length != 0) {
                           point = new BMap.Point(results._pois[0].point.lat, results._pois[0].point.lng);
                       }
                       $("#resultDiv").empty();
                       map.reset();
                       map.clearOverlays(); //clear all overlays on the map
                       $("#searchLocal").removeAttr("disabled");
                       var x = results._pois[0].point.lat;
                       var y = results._pois[0].point.lng;
                       var title = results._pois[0].title;
                       //if (1 == curPage) {
                           for (var i = 0; i < results._pois.length; i++) {
                               var str = "";
                               str += "<div style='width:320px'>" + (i + 1).toString() + ". "
                                  + "<a onclick='panToLocation(" + results._pois[i].point.lat + "," + results._pois[i].point.lng + ",\"" + results._pois[i].title + "\")' href='javascript:void(0);' id='lkPlace_" + results._pois[i].point.lat.toString() + "_" + results._pois[i].point.lng.toString() + "'>" + results._pois[i].title
                                  + "</a>"
                                  + "<br/>" + results._pois[i].address + "<br/>"
                                  + "Latitude: " + results._pois[i].point.lat.toString()
                                  + ", Longitude: " + results._pois[i].point.lng.toString()
                                  + "<br/><a  href='javascript:void(0);' id='lkPin_" + results._pois[i].point.lat.toString() + "_" + results._pois[i].point.lng.toString() + "'>"
                                  + "Pin it" + "</a>"
                                  + "</div>";
                               $("#resultDiv").append(str);
                               //curPage = 1; 
                               if (results._numPages > curPage) {
                                   $("#resultDiv").append("<a href='javascript:void(0);' onclick='prevPage()' id='lkPrev'>Prev</a> <a href='javascript:void(0);' onclick='nextPage()' id='lkNext'>Next</a>");
                               }
                           }
                           panToLocation(x, y, title);
                      // }

                   });
               }
           });

       });
   </script>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h2><%: ViewData["Message"] %></h2>


   <%-- <div id="veMap"> <%Html.RenderPartial("/Views/Maps/VirtualEarthMap.ascx"); %> </div>--%>

   <div style="float:left" id="baiduMap"><% Html.RenderPartial("/Views/Maps/BaiduMap.ascx"); %>
     <div id="mapTool">
       <input type="button" id="pushPin" value="Push a pin" />
       <input type="button" id="openDistanceTool" value="Open distance tool" />
       <input type="text" id="txtSearch" value="" />
       <input type="button" id="searchLocal" value="Search" />
   </div>
   </div>
   <div  id="resultDiv" style="float:right;width:auto"> </div>
 <div style="clear:both"></div>
   
</asp:Content>